<template>
	<div class="quer-store">
		<div class="store-list">
			<!-- <a href="javascript:;" @click="popShow" class="close"></a> -->
			<h2 class="list-title">{{storeListData[0].cityName}}当前有{{storeListData.length}}家门店提供服务</h2>
			<ul class="list">
				<li class="list-item" v-for="item in storeListData">
					<h4 class="item-title">{{item.storeName}}<span v-if="item.distanceFromMe != -1" class="distance">{{item.distanceFromMe | distanceText}}</span></h4>
					<div class="item-cont"><i class="icon-cont"></i><span class="text">{{item.address}}</span></div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import common from '../../../assets/js/common';
	import Vue from 'vue';
	import {Toast, MessageBox} from 'mint-ui';
	//import shareImg from "../../../static/image/shareimg.png";
	export default{
		data (){
			return {
				getStoreListUrl:common.isdev() + '/activity/groupbuy/getStoreList.htm',
				storeListShow:false,
				storeListData:[]
			};
		},
		props:[
			'spuCode'
		],
		watch:{

			'spuCode':'initStore'

		},
		created (){
			this.initStore();
		},
		methods: {
			//初始化门店查询
			initStore:function(){
				var _self = this;
				let option = {
					//prizeCode:this.prizeCode
					spuCode:common.getQueryString('spuCode')
				};
				console.log(option);
				common.vueAjax('post', _self.getStoreListUrl, option).then(res => {
					//console.log(res);
					//res.data.result 1:成功 2:失败
					if(res.data.result == 1){

						_self.storeListData = res.data.obj.reverse();
					}
					
				}, err => {

					//console.log(err);

				});
			},
			popShow:function(){

				var _self = this;

					_self.storeListShow = !_self.storeListShow;

					if(_self.storeListShow){

						//document.getElementById('pageWarp').style.height = '10px';
						//document.getElementById('pageWarp').style.overflowY = 'hidden';
						//document.body.style.height = '1px';
						//document.body.style.overflowY = 'hidden';

					}else{

						document.getElementById('pageWarp').style.height = '100%';
						document.getElementById('pageWarp').style.overflowY = 'scroll';
						document.body.style.height = '100%';
						document.body.style.overflowY = 'scroll';

					}

			}
		}
	}
</script>

<style lang="scss">
	@import "../../../assets/css/common.scss";
	.store-btn{
		padding:rem(12) rem(14);
		background-color:#fff;
		display:block;
		font-size:rem(15);
	}
	.icon-arrow{
		float:right;
		width:rem(7);
		height:rem(12);
		background:url('../../../assets/image/tuan/arrow.png') no-repeat;
		background-size:100% 100%;
		display:block;
		margin-top:rem(4);
	}
	.list{
		height:100%;
		padding-bottom:rem(75);
		overflow-y:scroll;
		-webkit-overflow-scrolling:touch;
	}
	.store-list{
		width:100%;
		height:100%;
		background:#fff;
		position:fixed;
		top:0;
		left:0;
		bottom:0;
		right:0;
		z-index:999;
		margin:auto;
	}
	.list-title{
		padding:rem(10);
		background-color:#f0eff5;
		color:#adacb2;
		font-size:rem(15);
	}
	.list-item{
		padding:rem(6);
		border-bottom:rem(10) solid #f0eff5;
		.item-title{
			width:100%;
			font-size:rem(15);
			color:#000;
			margin-bottom:rem(5);
		}
		.distance{
			float:right;
		}
		.item-cont{
			font-size:rem(14);
			color:#939393;
		}
	}
	.close{
		width:rem(15);
		height:rem(15);
		float:right;
		background:url('../../../assets/image/tuan/close.png') no-repeat;
		background-size:100% 100%;
		margin-top:rem(10);
		margin-right:rem(10);
	}
</style>
